<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* infinite：无限循环 */
      /* steps：分布动画，在工作中，配合精灵图实现精灵动画 */
      /* forwards 动画停止时在结束位置，backwards 停止时在开始位置（默认） */
      animation: 
        run 1s steps(12) infinite,
        move 6s forwards
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
<div>

</div>
</body>
</html>